<template>
    <button class="zgn-switch" :class="{'zgn-checked':value}" @click="toggle">
        <span></span>
    </button>
</template>

<script lang="ts">
export default {
    props:{
        value:Boolean,
    },
    setup(props,content){
        const toggle = () => {
           return  content.emit('update:value',!props.value)
        };
        return {toggle}
    }
}
</script>

<style lang="scss" >
$h:22px;
$h2:$h - 4px;
.zgn-switch{
    height: $h;
    width: $h*2;
    border: none;
    background: grey;
    border-radius: 11PX;
    position: relative;
    >span{
        position: absolute;
        top:2px;
        left:2px;
        height: $h2;
        width:$h2;
        background: white;
        border-radius: 11PX;
        transition: left 250ms;
    }
    &.zgn-checked{
    background: #1890ff;
    & > span{
        left:calc(100% - #{$h2} - 2px);
    }
    &:focus{
        outline:none;
    }
    &:active{
        >span{width :$h2+4px;}
    }
    &.zgn-checked:active{
        >span{
            width:$h2+4px;
            margin-left: -4px;
        }
    }
} 
    
}



</style>